<script lang="ts" setup>
import { throttle } from "lodash-es";
import { getImg } from "@/utils";
// import useSearch, { useSearchRefs } from "./useSearch";
// const { handleSearch } = useSearch();
// const { isVisible } = useSearchRefs();
defineOptions({ name: "Search" });
const router = useRouter();
const route = useRoute();

const timerId = ref<any>(null);
const isVisible = ref(true);
const lastScrollTop = ref(0);
const onScroll = throttle(() => {
  const scrollTop = window.scrollY;
  const compareLast = scrollTop - lastScrollTop.value;
  if (compareLast > 0) {
    isVisible.value = false;
    clearTimeout(timerId.value);
    timerId.value = setTimeout(() => {
      isVisible.value = true;
    }, 300);
  } else {
    isVisible.value = true;
  }
  lastScrollTop.value = scrollTop;
}, 50);
onMounted(() => {
  setTimeout(() => {
    window.addEventListener("scroll", onScroll);
  }, 100);
});
onBeforeUnmount(() => {
  window.removeEventListener("scroll", onScroll);
});

const search = () => {
  router.push("/search");
}
</script>
<template>
  <div
    :class="[
      'sticky left-0 transition-top origin-top-left z-99 w-full h-40 bg-[url(@/assets/img/ld.png)] bg-no-repeat bg-cover bg-center flex justify-between items-center px-10 mb-10',
      !isVisible ? 'top-[-42px]' : 'top-0',
    ]"
    ref="searchRef"
  >
    <div class="w-28">
      <img
        @click="router.back()"
        class="h-24"
        :src="getImg('zy_fh.png')"
        alt=""
        v-if="route.path !== '/home'"
      />
    </div>
    <div>
      <img
        class="w-146 h-30"
        @click="router.replace('/home')"
        :src="getImg('zy.png')"
        alt=""
      />
    </div>
    <div class="w-28">
      <img
        @click="search"
        class="h-24"
        :src="getImg('zy_ss.png')"
        alt=""
      />
    </div>
  </div>
</template>
